<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		ul {
			margin: 0;
		}

		#nav-checkbox {
			display: none;
		}

		.nav .nav-list {
			display: none;
		}


		#nav-checkbox:checked+.nav-list {
			display: block;
		}

		@media screen and (min-width: 768px) {

			.nav .nav-label,
			#nav-checkbox {
				display: none;
			}

			.nav .nav-list {
				display: inline-block;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		<nav class="nav">
			<label class="nav-label" for="nav-checkbox">
				<span>Nav（Click！）</span>
			</label>
			<!-- input 要和 ul 同级，方便css选择器能选中，如果用js控制就无所谓了 -->
			<input id="nav-checkbox" type="checkbox">
			<ul class="nav-list">
				<li><a href="#">Home</a></li>
				<li><a href="#product">Product</a></li>
				<li><a href="#news">News</a></li>
				<li><a href="#about">About</a></li>
			</ul>
		</nav>
	</div>
</body>

</html>